<template>
	<view>
		<view class="box">
			<view class="addressbox" v-for="(item) in areas">
				<view class="del">
					<uni-icons @click="del(item._id)" type="closeempty" size="15"></uni-icons>
				</view>
				<view class="name">
					{{ item.name }}，{{ item.phone }}
				</view>
				<view class="detail">
					{{ item.detail }}
				</view>
				<view class="bottom1">
					<view class="left1" >
						<radio-group @change="radioChange">
							<label class="radio">
								<radio :value="item._id" :checked="item.default" color="red" />
								<text :class="item.default ? 'selectDefault' : 'default'">默认值</text>
							</label>
						</radio-group>
					</view>
					<view class="right1">
						<button class="but" plain>复制</button>
						<button class="but" plain @click="xg(item)">修改</button>
					</view>
				</view>
			</view>
			<view class="show" v-show="open">
				<view class="adddz">
					<uni-icons class="close" @click="open = false" type="closeempty" size="30"></uni-icons>
					<view class="title">{{ ntitle }}</view>
					<view class="name"><text>收货人:</text><input v-model="name" type="text" placeholder="收货人名字" /></view>
					<view class="name"><text>手机号:</text><input v-model="phone" type="text" placeholder="收货人手机号" />
					</view>
					<view class="name"><text>地区:</text>
						<view class="">
							<uni-data-picker class="dq" placeholder="请选择" popup-title="请选择所在地区" :localdata="dataTree"
								v-model="classes" @change="onchange">
							</uni-data-picker>
						</view>
					</view>
					<view class="name"><text>详情地址:</text><input v-model="detail" type="text" placeholder="如街道 门牌号 小区" />
					</view>
					<button v-show="ntitle == '添加收货地址'" class="Savebut" @click="addaddress">保存</button>
					<button v-show='ntitle == "修改收货地址"' class="Savebut" @click="xgaddress">修改</button>
				</view>
			</view>

			<button @click="add" class="addbut"><uni-icons color="#fff" type="plusempty" size="20"></uni-icons>新增地址</button>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
let id = ref('')
let add = () => {
	open.value = true
	ntitle.value = '添加收货地址'
}
let xg = (data) => {
	id.value = data._id
	name.value = data.name
	phone.value = data.phone
	address.value = data.address
	detail.value = data.detail
	open.value = true
	ntitle.value = '修改收货地址'
}
let areas = ref([])
let ntitle = ref('')
let getaddress = () => {
	uni.request({
		url: 'http://127.0.0.1:3000/xaw/getaddress',
		method: 'GET',
		data: {

		},
		success(res: any) {
			areas.value = res.data.data
		}
	})
}
let radioChange = (e) => {
	uni.request({
		url: 'http://127.0.0.1:3000/xaw/updefault',
		method: 'PUT',
		data: {
			id: e.detail.value
		},
		success(res: any) {
			getaddress()
		}
	})
}
let del = (id: any) => {
	uni.request({
		url: 'http://127.0.0.1:3000/xaw/deladdress',
		method: 'DELETE',
		data: {
			id: id
		},
		success(res: any) {
			getaddress()
		}
	})
}
let getdzlist = () => {
	uni.request({
		url: 'http://127.0.0.1:3000/xaw/dzlist',
		method: 'GET',
		data: {

		},
		success(res: any) {
			dataTree.value = res.data.data
		}
	})
}
onMounted(() => {
	getdzlist()
	getaddress()
})
let addaddress = () => {
	uni.request({
		url: 'http://127.0.0.1:3000/xaw/addaddress',
		method: 'POST',
		data: {
			name: name.value, address: address.value, phone: phone.value, detail: detail.value
		},
		success(res: any) {
			open.value = false
			name.value = ''
			address.value = ''
			phone.value = ''
			detail.value = ''
			uni.showToast({
				title: '添加成功',
				duration: 2000,
				icon: 'success'
			});
			getaddress()
		}
	})
}
let xgaddress = () => {
	uni.request({
		url: 'http://127.0.0.1:3000/xaw/xgaddress',
		method: 'PUT',
		data: {
			id: id.value, name: name.value, address: address.value, phone: phone.value, detail: detail.value
		},
		success(res: any) {
			open.value = false
			name.value = ''
			address.value = ''
			phone.value = ''
			detail.value = ''
			uni.showToast({
				title: '修改成功',
				duration: 2000,
				icon: 'success'
			});
			getaddress()
		}
	})
}
let name = ref('李韶天')
let phone = ref('15677890267')
let detail = ref('山东省 济南市 历下区 韶腾天下')
let address = ref('')
let classes = ref('1-2')
let open = ref(false)

let onchange = (e: any) => {
	let a = ''
	e.detail.value.forEach((item: any) => {
		a += item.value + ' '
	})
	address.value = a
}

let dataTree = ref([{
	text: "一年级",
	value: "1-0",
	children: [{
		text: "1.1班",
		value: "1-1"
	},
	{
		text: "1.2班",
		value: "1-2"
	}]
},
{
	text: "二年级",
	value: "2-0",
	children: [{
		text: "2.1班",
		value: "2-1"
	},
	{
		text: "2.2班",
		value: "2-2"
	}]
},
{
	text: "三年级",
	value: "3-0",
	disable: true
}])
</script>

<style lang="scss" scoped>
.box {
	width: 750rpx;
	height: calc(100vh - 89rpx);
	background-color: #F2F2F2;

	.addressbox {
		margin-bottom: 20rpx;
		width: 750rpx;
		height: 250rpx;
		background-color: #fff;
		box-sizing: border-box;

		.name {
			padding-left: 20rpx;
			padding-right: 20rpx;
		}

		.del {
			padding-left: 20rpx;
			padding-right: 20rpx;
			text-align: right;
		}

		.bottom1 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 20rpx;
			padding-right: 20rpx;

			.left1 {
				.default {
					color: #ccc;
				}

				.selectDefault {
					color: red;
				}
			}

			.right1 {
				width: 250rpx;
				height: 92rpx;
				align-items: center;
				display: flex;

				button {
					width: 108rpx;
					height: 50rpx;
					line-height: 43rpx;
					font-size: 12rpx;
				}
			}
		}


		.detail {
			padding-left: 20rpx;
			padding-right: 20rpx;
			margin-top: 10rpx;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #ccc;
		}
	}
}

.show {
	position: fixed;
	bottom: 0;
	width: 750rpx;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000;

	.title {
		margin-top: 30rpx;
		font-size: 50rpx;
		text-align: center;
	}

	.name {
		margin-top: 50rpx;
		display: flex;
		align-items: center;
		border-bottom: solid #ccc 1px;
		padding-bottom: 30rpx;
		justify-content: space-between;

		.dq {
			width: 480rpx !important;
		}

		text {
			font-size: 40rpx;
		}

		input {
			width: 480rpx;
		}
	}

	.adddz {
		width: 750rpx;
		height: 1300rpx;
		border-top-right-radius: 40rpx;
		border-top-left-radius: 40rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		padding: 30rpx;
		box-sizing: border-box;

		.close {
			position: fixed;
			right: 30rpx;
		}

		.Savebut {
			width: 90%;
			position: fixed;
			bottom: 20rpx;
			background-color: #FF5000;
		}
	}
}


.addbut {
	background-color: #FF5000;
	color: #FFF;

}
</style>